<template>
	<view>
		<view class="container p-bottom" v-if=" detail.order_goods_id ">

			<form @submit="onSubmit" report-submit="true">

				<!-- 商品详情 -->
				<form @submit="onGoodsDetail" report-submit="true">
					<button class="btn-normal" form-type="submit" :data-id=" detail.goods_id ">
						<view class="goods-detail b-f dis-flex flex-dir-row">
							<view class="left">
								<image class="goods-image" :src=" detail.image.file_path "></image>
							</view>
							<view class="right dis-flex flex-box flex-dir-column flex-x-around">
								<view class="goods-name">
									<text class="twolist-hidden">{{ detail.goods_name }}</text>
								</view>
								<view class="dis-flex col-9 f-24">
									<view class="flex-box">{{ detail.goods_attr }}</view>
									<text class="t-r">×{{ detail.total_num }}</text>
								</view>
							</view>
						</view>
					</button>
				</form>

				<!-- 服务类型 -->
				<view class="row-service b-f m-top20">
					<view class="row-title">服务类型</view>
					<form @submit="onSwitchService" report-submit="true">
						<view class="service-switch dis-flex">
							<button class="btn-normal" form-type="submit" data-type="10">
								<view class="switch-item" :class="serviceType==10?'active':''">退货退款</view>
							</button>
							<button class="btn-normal dis-flex" form-type="submit" data-type="20">
								<view class="switch-item" :class=" serviceType==20?'active':'' ">换货</view>
							</button>
						</view>
					</form>
				</view>

				<!-- 申请原因 -->
				<view class="row-textarea b-f m-top20">
					<view class="row-title">申请原因</view>
					<view class="content">
						<textarea name="content" maxlength="2000" placeholder="请详细填写申请原因，注意保持商品的完好，建议您先与卖家沟通" placeholderStyle="color:#ccc"></textarea>
					</view>
				</view>

				<!-- 退款金额 -->
				<view v-if=" serviceType == 10 " class="row-money b-f m-top20 dis-flex">
					<view class="row-title">退款金额</view>
					<view class="money col-m">￥{{ detail.total_pay_price }}</view>
				</view>

				<!-- 上传凭证 -->
				<view class="row-voucher b-f m-top20">
					<view class="row-title">上传凭证 (最多6张)</view>
					<view class="image-list">
						<!-- 图片列表 -->
						<view class="image-preview" v-for="(item,index) in imageList" :v-for-index="imageIndex" :v-for-item="imagePath" :key="index">
							<text class="image-delete iconfont icon-shanchu" @tap="deleteImage" :data-index="index" :data-image-index="imageIndex"></text>
							<image mode="aspectFill" :src="imagePath"></image>
						</view>
						<!-- 上传图片 -->
						<form v-if=" imageList.length < 6 " @submit="chooseImage" report-submit="true">
							<button class="btn-normal" form-type="submit">
								<view class="image-picker dis-flex flex-dir-column flex-x-center flex-y-center">
									<text class="choose__icon iconfont icon-tubiao_xiangji"></text>
									<text class="choose__text">上传图片</text>
								</view>
							</button>
						</form>
					</view>
				</view>

				<view class="flow-fixed-footer b-f">
					<button class="btn-normal" form-type="submit">
						<view class="flow-btn f-32">确认提交</view>
					</button>
				</view>
			</form>

		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				// 订单商品id
				order_goods_id: null,

				// 订单商品详情
				detail: {},

				// 图片列表
				imageList: [],

				// 服务类型
				serviceType: 10,
			}
		},
		disable: false,

		/**
		 * 生命周期函数--监听页面加载
		 */
		onLoad: function(options) {
			// 记录页面参数
			this.order_goods_id = options.order_goods_id;

			// 获取订单商品详情
			this.getGoodsDetail();
		},
		methods: {
			/**
			 * 获取订单商品详情
			 */
			getGoodsDetail: function() {
				let _this = this;
				_this._get('sharing.refund/apply', {
					order_goods_id: this.order_goods_id
				}, function(result) {
					_this.setData(result.data);
				});
			},

			/**
			 * 切换标签
			 */
			onSwitchService: function(e) {
				// 记录formId
				_this.saveFormId(e.detail.formId);
				this.setData({
					serviceType: e.detail.target.dataset.type
				});
			},

			/**
			 * 跳转商品详情
			 */
			onGoodsDetail: function(e) {
				// 记录formId
				_this.saveFormId(e.detail.formId);
				uni.navigateTo({
					url: '../../../goods/index?goods_id=' + e.detail.target.dataset.id
				});
			},

			/**
			 * 选择图片
			 */
			chooseImage: function(e) {
				let _this = this,
					index = e.currentTarget.dataset.index,
					imageList = _this.imageList;
				// 记录formId
				_this.saveFormId(e.detail.formId);
				// 选择图片
				uni.chooseImage({
					count: 6 - imageList.length,
					sizeType: ['original', 'compressed'], // 可以指定是原图还是压缩图，默认二者都有
					sourceType: ['album', 'camera'], // 可以指定来源是相册还是相机，默认二者都有
					success: function(res) {
						_this.setData({
							imageList: imageList.concat(res.tempFilePaths)
						});
					}
				});
			},

			/**
			 * 删除图片
			 */
			deleteImage: function(e) {
				let dataset = e.currentTarget.dataset,
					imageList = this.imageList;
				imageList.splice(dataset.imageIndex, 1);
				this.setData({
					imageList
				});
			},

			/**
			 * 表单提交
			 */
			onSubmit: function(e) {
				let _this = this;

				if (!e.detail.value.content) {
					_this.showError('申请原因不能为空');
					return false;
				}

				// 判断是否重复提交
				if (_this.disable === true) {
					return false;
				}
				// 表单提交按钮设为禁用 (防止重复提交)
				_this.disable = true;

				uni.showLoading({
					title: '正在处理...',
					mask: true
				});

				// form参数
				let postParams = {
					order_goods_id: _this.order_goods_id,
					type: _this.serviceType,
					content: e.detail.value.content,
				};

				// form提交执行函数
				let fromPostCall = function(params) {
					console.log('fromPostCall');
					_this._post_form('sharing.refund/apply', params, function(result) {
							if (result.code === 1) {
								_this.showSuccess(result.msg, function() {
									// 跳转售后管理页面
									uni.navigateTo({
										url: "../index"
									});
								});
							} else {
								_this.showError(result.msg);
							}
						},
						false,
						function() {
							uni.hideLoading();
							_this.disable = false;
						});
				};

				// 统计图片数量
				let imagesLength = _this.imageList.length;

				// 判断是否需要上传图片
				imagesLength > 0 ? _this.uploadFile(imagesLength, fromPostCall, postParams) : fromPostCall(postParams);
			},

			/**
			 * 上传图片
			 */
			uploadFile: function(imagesLength, callBack, formData) {
				let uploaded = [];
				// 文件上传
				let i = 0;
				this.imageList.forEach(function(filePath, fileKey) {
					uni.uploadFile({
						url: _this.api_root + 'upload/image',
						filePath: filePath,
						name: 'iFile',
						formData: {
							wxapp_id: _this.getWxappId(),
							token: uni.getStorageSync('token')
						},
						success: function(res) {
							let result = typeof res.data === "object" ? res.data : JSON.parse(res.data);
							if (result.code === 1) {
								uploaded[fileKey] = result.data.file_id;
							}
						},
						complete: function() {
							i++;
							if (imagesLength === i) {
								// 所有文件上传完成
								console.log('upload complete');
								formData['images'] = uploaded;
								// 执行回调函数
								callBack && callBack(formData);
							}
						}
					});
				});
			},

		}
	}
</script>

<style>
	.container {
		font-size: 28upx;
	}

	.row-title {
		color: #888;
		margin-bottom: 20upx;
	}

	.goods-detail {
		padding: 24upx 20upx;
	}

	.goods-detail .left .goods-image {
		display: block;
		width: 150upx;
		height: 150upx;
	}

	.goods-detail .right {
		padding-left: 20upx;
	}

	/* 服务类型 */

	.row-service {
		padding: 24upx 20upx;
	}

	.service-switch .switch-item {
		height: 38upx;
		line-height: 38upx;
		padding: 10upx 30upx;
		margin-right: 25upx;
		border-radius: 10upx;
		border: 1px solid rgb(177, 177, 177);
		color: #888;
	}

	.service-switch .switch-item.active {
		color: #fc1e56;
		border: 1px solid #fc1e56;
	}

	/* 申请原因 */

	.row-textarea {
		padding: 24upx 20upx;
	}

	.row-textarea textarea {
		width: 100%;
		height: 220upx;
		padding: 12upx;
		border: 1upx solid #e8e8e8;
		border-radius: 5upx;
		box-sizing: border-box;
	}

	/* 退款金额 */

	.row-money {
		padding: 24upx 20upx;
	}

	.row-money .row-title {
		margin-bottom: 0;
		margin-right: 30upx;
	}

	/* 上传凭证 */

	.row-voucher {
		padding: 24upx 20upx;
	}

	.row-voucher .image-list:after {
		clear: both;
		content: " ";
		display: table;
	}

	.row-voucher .image-list image {
		display: block;
		width: 150upx;
		height: 150upx;
	}

	.row-voucher .image-list .image-picker {
		width: 150upx;
		height: 150upx;
		border: 1upx dashed #ccc;
		color: #ccc;
	}

	.row-voucher .image-list .image-picker .choose__icon {
		font-size: 56upx;
		margin-bottom: 6upx;
	}

	.row-voucher .image-list .image-picker .choose__text {
		font-size: 22upx;
	}

	.row-voucher .image-list .image-picker,
	.image-list .image-preview {
		margin: 15upx 30upx 15upx 0;
		float: left;
	}

	.row-voucher .image-list .image-picker:nth-child(4n+0),
	.row-voucher .image-list .image-preview:nth-child(4n+0) {
		margin-right: 0;
	}

	.row-voucher .image-list .image-preview {
		position: relative;
	}

	.row-voucher .image-list .image-preview .image-delete {
		position: absolute;
		top: -15upx;
		right: -15upx;
		height: 42upx;
		width: 42upx;
		line-height: 42upx;
		background: rgba(0, 0, 0, 0.64);
		border-radius: 50%;
		color: #fff;
		font-weight: bolder;
		font-size: 22upx;
		z-index: 10;
		text-align: center;
	}
</style>
